<template>
  <view class="container">
    <view class="section">
      <view class="section-title">工作经历</view>
      <view class="timeline">
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-header">
              <view class="timeline-company">ABC科技有限公司</view>
              <view class="timeline-year">2018-至今</view>
            </view>
            <view class="timeline-position">高级全栈开发工程师</view>
            <view class="timeline-description">
              负责公司核心产品的前端和后端开发，主导多个小程序项目的架构设计和实现，优化现有系统性能，提升用户体验。
            </view>
          </view>
        </view>
        <view class="timeline-item">
          <view class="timeline-dot"></view>
          <view class="timeline-content">
            <view class="timeline-header">
              <view class="timeline-company">XYZ互联网公司</view>
              <view class="timeline-year">2015-2018</view>
            </view>
            <view class="timeline-position">前端开发工程师</view>
            <view class="timeline-description">
              负责公司Web产品的前端开发，参与移动端H5页面和小程序的开发工作，优化前端性能，提升页面加载速度。
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">项目经验</view>
      <view class="project-list">
        <view class="project-item" v-for="(project, index) in projects" :key="index">
          <view class="project-title">{{project.title}}</view>
          <view class="project-time">{{project.time}}</view>
          <view class="project-description">{{project.description}}</view>
          <view class="project-role">担任角色：{{project.role}}</view>
          <view class="project-technologies">使用技术：{{project.technologies}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        projects: [
          {
            title: "电商小程序",
            time: "2020-2021",
            description: "开发了一款完整的电商小程序，包含商品展示、购物车、订单管理、支付等功能模块。",
            role: "项目负责人",
            technologies: "Vue、小程序原生开发、Node.js、MongoDB"
          },
          {
            title: "企业官网",
            time: "2019-2020",
            description: "设计并开发了企业官方网站，提升企业品牌形象，增加线上曝光率。",
            role: "前端开发",
            technologies: "React、Redux、Node.js、MySQL"
          },
          {
            title: "在线教育平台",
            time: "2018-2019",
            description: "开发了在线教育平台，支持视频课程、直播教学、作业批改等功能。",
            role: "全栈开发",
            technologies: "Vue、Express、MongoDB、WebRTC"
          }
        ]
      }
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style scoped>
  .container {
    padding: 20px;
    box-sizing: border-box;
  }

  .section {
    margin-top: 30rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1px solid #eee;
  }

  .timeline {
    position: relative;
  }

  .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20rpx;
    width: 2rpx;
    height: 100%;
    background-color: #eee;
  }

  .timeline-item {
    display: flex;
    margin-bottom: 40rpx;
    position: relative;
  }

  .timeline-dot {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background-color: #007AFF;
    margin-right: 20rpx;
    z-index: 1;
  }

  .timeline-content {
    flex: 1;
    background-color: #f9f9f9;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .timeline-company {
    font-size: 30rpx;
    font-weight: bold;
  }

  .timeline-year {
    font-size: 26rpx;
    color: #666;
  }

  .timeline-position {
    font-size: 28rpx;
    color: #007AFF;
    margin-bottom: 10rpx;
  }

  .timeline-description {
    font-size: 28rpx;
    color: #333;
    line-height: 1.5;
  }

  .project-list {
  }

  .project-item {
    background-color: #f9f9f9;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
  }

  .project-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .project-time {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .project-description {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    line-height: 1.5;
  }

  .project-role {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .project-technologies {
    font-size: 28rpx;
    color: #666;
  }
</style>